<!DOCTYPE HTML>
<head>
<meta charset="UTF-8">
<script src="domrec.js"></script>
<body>
<p><button id="record">Start recording</button> <button id="stop">Stop recording</button>
<div id="content" style="background:yellow">
<p><button id="action">Click me to do stuff</button>
<p><input value="type here">
<script>
document.getElementById("action").addEventListener("click", function() {
  let v = document.createElement("div");
  v.style.width = "100px";
  v.style.height = "100px";
  v.style.margin = "20px";
  v.style.background = "blue";
  document.getElementById("content").appendChild(v);
});
document.getElementById("record").addEventListener("click", function() {
  window.recorder = new DOMRec(document.getElementById("content"));
});
document.getElementById("stop").addEventListener("click", function() {
  let contents = window.recorder.stop();
  document.body.textContent = JSON.stringify(contents);
});
</script>
</div>
